<template>
	<view class="room-name-content">
		<view class='container-box'>
			<view class="input-item conf">
				<view class="label">开启美颜</view>
				<switch class="switch" @change="beautyChange"></switch>
			</view>
			<view class="input-item conf">
				<view class="label">开启镜像</view>
				<switch class="switch" @change="mirrorChange"></switch>
			</view>
		</view>
		<view class="bottom-btn">
			<button type="primary" @click="handleCreate" hover-class="none">创建直播</button>
		</view>
	</view>
</template>

<script>
	import {
		getStorage,
		removeStorage
	} from '@/util/auth.js'
	import {
		getMediaAuth
	} from '@/util/util.js'
	import {
		uploadFile
	} from '@/api/file.js'
	import {
		createLive as createLiveApi
	} from '@/api/live.js';
	export default {
		data() {
			return {
				roomName: '', // 房间名称
				cover: '',
				introduce: '',
				positionData: [],
				pushConf: {
					beauty: 0,
					whiteness: 0,
					'device-position': 'front',
					'remote-mirror': false,
					'local-mirror': 'disable',
					'enable-ans': true,
					'beauty-style': 'nature',
					'enable-mic': false,
				},
			}
		},
		computed: {
			positionCount() {
				let total = 0;
				Object.keys(this.positionData).forEach((item) => {
					total += this.positionData[item].length
				})
				return total;
			}
		},
		methods: {
			navigate() {
				uni.navigateTo({
					url: '/page_other/live/enterprise'
				})
			},
			beautyChange(e) {
				this.pushConf.beauty = this.pushConf.whiteness = e.detail.value ? 5 : 0;
			},
			mirrorChange(e) {
				if (e.detail.value) {
					this.pushConf['remote-mirror'] = true;
					this.pushConf['local-mirror'] = 'auto';
				} else {
					this.pushConf['remote-mirror'] = false;
					this.pushConf['local-mirror'] = 'auto';
				}
			},
			chooseImage() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					success: (e) => {
						uni.showLoading({
							title: '上传中',
							mask: true
						})
						uploadFile(e.tempFilePaths[0]).then((res) => {
							const data = JSON.parse(res.data);
							uni.hideLoading()
							if (data.code == 200) {
								this.showToast('上传成功')
								this.cover = data.data;
							} else {
								this.showToast(data.msg)
							}
						}).catch((res) => {
							uni.hideLoading()
							this.showToast('上传失败');
						})
					}
				})
			},
			handleCreate() {
				let auth = getMediaAuth();
				Promise.all(auth).then(() => {
					this.createRoom();
				}, () => {
					uni.showModal({
						title: '提示',
						content: '获取授权失败，请在设置页开启权限',
						confirmText: '去开启',
						cancelText: '取消',
						success: (e) => {
							if (e.confirm) {
								uni.openSetting({
									fail(e) {
										console.log(e);
									}
								});
							}
						}

					})
				})
			},
			createRoom() {
				uni.showLoading({
					title: '创建中',
					mask: true
				})
				const form = {
					pushConf: JSON.stringify(this.pushConf)
				}
				createLiveApi(form).then((res) => {
					const room=res;
					//创建imRoom
					uni.showLoading({
						title: '创建中',
						mask: true,
					})
					uni.$TUIKit.createGroup({
						name: room.roomName,
						type: uni.$TUIKitTIM.TYPES.GRP_AVCHATROOM,
						groupID: room.roomId,
						avatar: room.cover,
						introduction: room.introduce
					}).then(() => {
						uni.hideLoading();
						uni.navigateTo({
							url: `/page_other/live/room?roomId=${room.roomId}&action=anchor`
						})
					}).catch(() => {
						uni.hideLoading();
						this.showToast('创建失败');
					})
				}).catch(() => {
					this.showToast('创建失败');
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container-box {
		background-image: url(https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/live/create_live_bg.jpg);
		background-color: #333;
		background-repeat: no-repeat;
		background-size: cover;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;

		.input-item {
			width: calc(100% - 150rpx);
			display: flex;
			flex-direction: row;
			background: rgba(0, 0, 0, 0.3);
			border-radius: 10rpx;
			padding: 16rpx;
			margin-top: 30rpx;

			.cover-block {
				width: 140rpx;
				height: 140rpx;
				background: rgba(255, 255, 255, .15);
				border-radius: 10rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				margin-right: 20rpx;
				color: #fff;

				.text {
					font-size: 28rpx;
					margin-top: 16rpx;
				}

				.iconfont {
					font-size: 38rpx;
				}

				.cover-photo {
					width: 100%;
					height: 100%;
				}
			}

			.input {
				width: calc(100% - 160rpx);
				font-size: 28rpx;
				flex: none;
				color: #fff;
			}
		}

		.input-item.conf {
			align-items: center;

			.label {
				color: #fff;
				font-size: 28rpx;
				flex-grow: 1;
			}

			.switch {
				flex-grow: 0;
				transform: scale(0.8);
			}
		}
	}

	.bottom-btn {
		position: fixed;
		width: 92vw;
		left: 4vw;
		bottom: 6vh;
	}

	.bottom-btn button {
		background-color: #fe7725;
		border-radius: 50px;
		width: 60%;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 28rpx;
	}
</style>
